<!DOCTYPE html>
<html>
<head>
    <title>志愿者申请</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <include file="public@head_base"/>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/volunteer.css">

</head>

<body class="body-white">
<div class="container shadow">
    <include file="public@nav"/>
    <div class="row">
        <div class="upload_form">
            <h2 class="text-center">志愿者申请</h2>
            <p class="tips">如何申请志愿者，请如实填写下表。如有账号？<a href="{:cmf_url('volunteer/login/index')}" style="color: #0055aa">立即登录</a></p>


            <form class="layui-form" style="width: 720px;margin: auto;margin-top: 24px;"
                  action="{:url('volunteer/Register/doRegister')}" method="post">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>基本信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">照片</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-normal" id="avatar">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <img class="photo" style="width: 92px;height: 92px;margin: 0 10px 10px 0;">
                        <input type="hidden" name="photo" id="photo">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" placeholder="请输入账号" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入姓名" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">登录密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">出生年月</label>
                        <div class="layui-input-inline">
                            <input type="text" name="birthday" id="date" lay-verify="date" placeholder="请选择日期"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">籍贯</label>
                        <div class="layui-input-inline">
                            <input type="text" name="jiguang" required lay-verify="required" placeholder="请输入籍贯"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">民族</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mingzu" required lay-verify="required" placeholder="请输入民族"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">政治面貌</label>
                        <div class="layui-input-inline">
                            <input type="text" name="zzmm" required lay-verify="required" placeholder="请输入政治面貌"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-inline">
                            <input type="text" name="xueli" required lay-verify="required" placeholder="请输入学历"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">职称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="zhicheng" required lay-verify="required" placeholder="请输入职称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">职务</label>
                        <div class="layui-input-inline">
                            <input type="text" name="zhiwu" required lay-verify="required" placeholder="请输入职务"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>详细信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">毕业学校与专业</label>
                    <div class="layui-input-block">
                        <input type="text" name="byxx" required lay-verify="required" placeholder="请输入毕业学校与专业"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工作单位与地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="ggdw" required lay-verify="required" placeholder="工作单位与地址"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required lay-verify="required" placeholder="身份证号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">特长爱好</label>
                    <div class="layui-input-block">
                        <input type="text" name="techang" required lay-verify="required" placeholder="特长爱好"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>联系方式</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="address" required lay-verify="required" placeholder="特长爱好"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮政编码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="post_code" required lay-verify="required" placeholder="邮政编码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">办公电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tel" required lay-verify="required" placeholder="办公电话"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" required lay-verify="required" placeholder="手机"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">QQ</label>
                        <div class="layui-input-inline">
                            <input type="text" name="qq" required lay-verify="required" placeholder="手机"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务意向</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="yixiang[]" value="0" title="公共突发事件应急救援" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="1" title="大型活动现场救援" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="2" title="义诊" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="3" title="献血" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="4" title="业务查房" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="5" title="导医" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="6" title="讲学" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="7" title="对口帮扶" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="8" title="健康咨询" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="9" title="心理辅导" lay-skin="primary">
                        <input type="checkbox" name="yixiang[]" value="10" title="其他" lay-skin="primary">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">个人简历</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入个人简历" name="jianli" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入备注" name="beizhu" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /container -->

<include file="public@scripts"/>
</body>
<script>
    //Demo
    layui.use(['form', 'laydate', 'upload'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //监听提交
        form.on('submit(formDemo)', function (data) {

            var index = layer.load(2);
            console.log(data);
            var fields=$(data.form).serialize();
            $.post("{:url('volunteer/register/doRegister')}", fields, function (res) {
                console.log(res);
                layer.close(index);
                layer.alert(res.msg, function (index) {
                    if (res.code == 1) {
                        window.location.href = res.url;
                    }
                    layer.close(index)
                });

            });
            return false;
        });
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date' //指定元素
        });
        var upload = layui.upload;
        upload.render({
            elem: '#avatar'
            , url: "{:url('volunteer/register/photo')}"
            , done: function (res, index, upload) { //上传后的回调
                console.log(res);
                var img = $(".photo");
                console.log(img);
                img.attr('src', res.url);
                $("#photo").val(res.data.file);
            }
            //,accept: 'file' //允许上传的文件类型
            //,size: 50 //最大允许上传的文件大小
            //,……
        })
    });

</script>
</html>